<template>

  <el-form :model="order" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-card class="box-card">
      <span>基本信息</span>
      <div class="text item">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input v-model="order.orderNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请时间" >
              <el-input :value="getDate(order.addTime)" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
          <el-col :span="12">
            <el-form-item label="订单状态">
              <el-input v-model="order.statusString" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
       <el-row>
          <el-col :span="12">
            <el-form-item label="融资经销商" >
              <el-input v-model="order.dealerName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汽车总数量" >
              <el-input v-model="order.carSumNumber" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
       <el-row>
          <el-col :span="12">
            <el-form-item label="融资总金额(元)">
              <el-input :value="order.mortgageSumMoney| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.mortgageSumMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已回本金(元)" >
              <el-input :value="order.returnCapital| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.returnCapital|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
       <el-row>
          <el-col :span="12">
            <el-form-item label=" 总天数 ">
              <el-input v-model="order.sumDay" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="逾期利率" >
              <el-input v-model.number="order.exceedRate" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="初始融资周期 ">
              <el-input v-model="order.description" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="初始融资利率" >
              <el-input :value="order.mortgageInterestRate| toFixed4 " disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="逾期天数" >
              <el-input v-model="order.overDay" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="未逾期天数" >
              <el-input v-model="order.unOverDay" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label=" 逾期费(元)" >
              <el-input :value="order.exceed| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.exceed|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已回逾期费(元)" >
              <el-input :value="order.returnExceed | toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.returnExceed|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label=" 利息(元)" >
              <el-input :value="order.interest| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.interest|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="已回利息(元)" >
              <el-input type="textarea" :value="order.returnInterest| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.returnInterest|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>


        
       <el-row>
          <el-col :span="12">
            <el-form-item label="延期融资周期" >
              <el-input v-model="order.delayDescription" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="延期备注">
              <el-input v-model="order.remark" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>


         <el-row>
          <el-col :span="12">
            <el-form-item label="延期操作人" >
              <el-input v-model="order.createrName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="延期操作时间">
              <el-input :value="getDate(order.createTime)" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="延期融资利率" >
              <el-input :value="order.delayInterestRate| toFixed4" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="延期天数" >
              <el-input v-model="order.delayDay" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row><el-row>
          <el-col :span="12">
            <el-form-item label="延期费(元)" >
              <el-input :value="order.delayMoney| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.delayMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已回延期费(元)">
              <el-input :value="order.returnDelayMoney| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.returnDelayMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="待回款总金额(元)">
              <el-input :value="order.returnMoney| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.returnMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金金额(元)">
              <el-input :value="order.deposit| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.deposit|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>

      </div>
    </el-card>
    <el-card class="box-card" v-if="this.childCode=='添加'">
      <div slot="header" class="clearfix">
        <span>回款信息</span>
      </div>
      <el-row>
          <el-col :span="12">
            <el-form-item label="回款总额(元)">
              <el-input :value="order.principal+order.interest+order.extensionFee+order.demurrage| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.principal+order.interest+order.extensionFee+order.demurrage|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回款本金(元)" prop="principal">
              <el-input v-number='2' v-model.number="order.principal" ></el-input>
              <span class="convertCurrency">{{order.principal|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
     <el-row>
          <el-col :span="12">
            <el-form-item label="回款利息(元)" prop="interests">
              <el-input v-number='2' v-model.number="order.interests" ></el-input>
              <span class="convertCurrency">{{order.interest|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回款逾期费(元)" prop="extensionFee">
              <el-input v-number='2' v-model.number="order.extensionFee" ></el-input>
              <span class="convertCurrency">{{order.extensionFee|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="回款延期费(元)" prop="demurrage">
              <el-input v-number='2' v-model.number="order.demurrage" ></el-input>
              <span class="convertCurrency">{{order.demurrage|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="差异调整金额(元)">
              <el-input v-number='2' v-model="order.setMoney" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="回款状态">
             <el-checkbox v-model="order.recycleCode" >是否已结清</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if='!order.isSettle'>
            <el-form-item label="第一期服务费结清状态">
             <el-checkbox v-model="order.serviceChargeCode" >是否已结清</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="差异调整原因" >
              <el-input v-model="order.setMoneyReason" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回款银行卡">
              <el-input v-model="order.card" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="回款时间" prop="startDate">
                <el-date-picker :editable="false" v-model="order.startDate" type="datetime" placeholder="选择日期"  :disabled="childCode=='child查看'">
            </el-date-picker>
        </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行流水编号" prop="number">
              <el-input v-model="order.number" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="回款备注">
              <el-input v-model="order.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
    </el-card>
    <el-card class="box-card" v-else>
      <div slot="header" class="clearfix">
        <span>回款信息</span>
      </div>
      <el-row>
          <el-col :span="12">
            <el-form-item label="回款总额(元)">
              <el-input :value="detail.capital+detail.interest+detail.exceed+detail.delayMoney| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{detail.capital+detail.interest+detail.exceed+detail.delayMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回款本金(元)" >
              <el-input :value="detail.capital| toFixed2" disabled ></el-input>
              <span class="convertCurrency">{{detail.capital|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
     <el-row>
          <el-col :span="12">
            <el-form-item label="回款利息(元)">
              <el-input :value="detail.interest| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{detail.interest|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回款逾期费(元)">
              <el-input :value="detail.exceed| toFixed2 " disabled></el-input>
              <span class="convertCurrency">{{detail.exceed|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="回款延期费(元)" >
              <el-input :value="detail.delayMoney| toFixed2 "  disabled></el-input>
              <span class="convertCurrency">{{detail.delayMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="差异调整金额(元)">
              <el-input :value="detail.discrepancyMoney| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{detail.discrepancyMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="回款状态">
             <el-checkbox :value="detail.isFinish " :label='detail.isFinish' disabled>是否已结清</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="第一期服务费结清状态">
             <el-checkbox :value="order.isSettle" :label='order.isSettle' :disabled='order.isSettle'> 是否已结清</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="差异调整原因" >
              <el-input :value="detail.discrepancyRemark" disabled ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回款银行卡">
              <el-input :value="detail.bankNumber " disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="回款时间" >
                  <el-input :value="getDate(detail.repaymentDate) " disabled ></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行流水编号">
              <el-input :value="detail.bankTransaction " disabled ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="回款备注">
              <el-input :value="detail.repaymentRemark " :maxlength='100' disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回款信息添加人" >
              <el-input :value="detail.createPerson" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      <el-form-item label=" 回款信息添加时间 " prop="desc">
        <el-input type="textarea" :value="getDate(detail.createDate)" disabled></el-input>
      </el-form-item>
    </el-card>
    <el-form-item class='align'>
      <el-button  type="primary" @click="resetForm('ruleForm')" >返回</el-button>
      <el-button type="success" @click="submitForm('ruleForm')" v-if="childCode!=='child查看'">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {
    require,
    prop,
    decimalTwo,
    decimal
  } from '@/utils/rules.js' //表单验证规则
  import agentHttp from '@/utils/agentHttp.js'
  import {timestampToTime,formatTimer} from '@/utils/index.js'
  export default {
    data() {
      return {
        rules: {
          principal:[require('回款本金'),{ validator: decimal, trigger: "blur"}],
          interests:[require('回款利息'),{ validator: decimal, trigger: "blur"}],
          extensionFee:[require('回款逾期费'),{ validator: decimal, trigger: "blur"}],
          demurrage:[require('回款延期费'),{ validator: decimal, trigger: "blur"}],
          recycleCode:[require('回款状态')],
          serviceChargeCode:[require('第一期服务费结清状态')],
          startDate:[require('回款时间')],
          number:[require('银行流水编号'),{ validator: decimal, trigger: "blur"}],
          interest:[require('回款利息'),{ validator: decimal, trigger: "blur"}],
        },
        order:{
          principal:'',
          interests:'',          //添加的时候用这个利息
          returnInterest:'',
          extensionFee:'',
          demurrage:'',
          recycleCode:'',
          serviceChargeCode:'',
          number:'',
          startDate:'',     //事件选择器绑定的值
          setMoney:''  ,  //差异调整金额
          setMoneyReason:'',    //差异调整原因
          card:'',          //回款银行卡
          remarks:'',       //回款备注
        },
        detail:"",
         endDateOpt:{
          disabledDate:(time)=>{
            var timestamp=new Date().getTime()-86400000;       //864代表一天
            return  time.getTime() <  timestamp
          }
      },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
              const params = {
                      "bankNumber": this.order.card,    //银行卡
                      "bankTransaction": this.order.number, //流水
                      "capital": this.order.principal,         //回款本金 
                      "carOrderId": this.order.carOrderId,      //订单ID
                      "delayMoney": this.order.demurrage,      // 回款延期费
                      "discrepancyMoney": this.order.setMoney,  //差异调整金额 ,
                      "discrepancyRemark": this.order.setMoneyReason, // 差异调整原因 ,
                      "exceed": this.order.extensionFee,                    //回款逾期费 ,
                      "interest": this.order.interests,                  // 回款利息
                      "isDelayFinish": this.order.serviceChargeCode?true:false,         //第一期服务费结清状态
                      "isFinish": this.order.recycleCode?true:false,              //回款状态
                      "repaymentDate": this.order.startDate,  //回款时间 ,
                      "repaymentRemark": this.order.remarks     //回款备注
                    }
                  
             agentHttp.postJson(`adminApi/admin/mortgage_order_repayment/add`,params).then(res=>{
                if(res.success){
                    this.dialogSendData.dialogFormVisible = false;
                     this.$message.success(res.data||"提交成功");
                      this.$emit('Refresh',null);
                }
             })

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogSendData.dialogFormVisible = false;
      },
      startDateOpt: {     // 事件选择器的方法
        disabledDate(time) {
          return time.getTime() > Date.now() 
        }
      },
      initData(){
             agentHttp.get(`adminApi/admin/mortgage_order_repayment/view/${this.carorderId}/${this.childCode=='添加'?0:this.id}`).then((data) => {
                  this.order = Object.assign({},this.order,data.data.order)                  
                   this.detail = data.data.detail
                
          
        })
      },
      getDate(time){
        return timestampToTime(time)
      }
    },
    props: {
      dialogSendData: {
        type: Object
      },
      childCode:{
        type:String
      },
      carorderId:{
        type:Number
      },
      id:{
        type:Number
      }
    },
    mounted() {
      if(this.childCode=='添加'){
        this.id=null
      }
      this.initData()
    }
  };

</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
  }

  .align {
    margin: 50px auto 0;
    text-align: center;
  }

</style>

